﻿@using Mes5GService.Web.Resources

@inject IWebResourceManager WebResourceManager
@{
    WebResourceManager.AddScript(ApplicationPath + "view-resources/Areas/AppAreaName/Views/_Bundles/morris.min.js");
    WebResourceManager.AddScript(ApplicationPath + "view-resources/Areas/AppAreaName/Views/_Bundles/raphael.min.js");
    WebResourceManager.AddScript(ApplicationPath + "view-resources/Areas/AppAreaName/Views/_Bundles/jquery.flot.min.js");
    WebResourceManager.AddScript(ApplicationPath + "view-resources/Areas/AppAreaName/Views/_Bundles/jquery.waypoints.min.js");
    WebResourceManager.AddScript(ApplicationPath + "view-resources/Areas/AppAreaName/Views/_Bundles/jquery.counterup.min.js");
    WebResourceManager.AddScript(ApplicationPath + "view-resources/Areas/AppAreaName/Views/_Bundles/topojson.min.js");
    WebResourceManager.AddScript(ApplicationPath + "view-resources/Areas/AppAreaName/Views/_Bundles/jquery.easypiechart.min.js");
    WebResourceManager.AddScript(ApplicationPath + "view-resources/Areas/AppAreaName/Views/_Bundles/chartist.min.js");
}
<div class="HostTopStatsContainer h-100">
    <div class="row row-no-padding row-col-separator-xl">
        <div class="col">
            <div class="card card-custom bgi-no-repeat card-stretch gutter-b new-subscription-statistics h-100">
                <div class="card-body">
                    <a href="#" class="card-title text-left font-weight-bolder text-dark font-size-h6 mb-4 text-hover-state-dark d-block">
                        @L("NewSubscriptionAmount")
                    </a>
                    <div class="font-weight-bold font-size-sm text-left text-info">
                        $ <span class="text-info font-weight-bolder font-size-h2 mr-2 new-subscription-amount counterup">...</span>
                    </div>
                    <div class="progress progress-xs mt-7 bg-info-o-60">
                        <div class="progress-bar bg-info" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <div class="text-left text-dark-75 mt-1 status-title"></div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card card-custom bgi-no-repeat card-stretch gutter-b new-tenants-statistics h-100">
                <div class="card-body">
                    <a href="#" class="card-title text-left font-weight-bolder text-dark font-size-h6 mb-4 text-hover-state-dark d-block">
                        @L("NewTenants")
                    </a>
                    <div class="font-weight-bold text-muted font-size-sm text-left">
                        <span class="text-warning font-weight-bolder font-size-h2 mr-2 new-tenants-count counterup">...</span>
                    </div>
                    <div class="progress progress-xs mt-7 bg-info-o-60">
                        <div class="progress-bar bg-warning" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <div class="text-left text-dark-75 mt-1 status-title"></div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card card-custom bgi-no-repeat card-stretch gutter-b dashboard-statistics1 h-100">
                <div class="card-body">
                    <a href="#" class="card-title text-left font-weight-bolder text-dark font-size-h6 mb-4 text-hover-state-dark d-block">
                        @L("DashboardSampleStatistics") 1
                    </a>
                    <div class="font-weight-bold text-muted font-size-sm text-left">
                        <span class="text-danger font-weight-bolder font-size-h2 mr-2 dashboard-placeholder1 counterup">...</span>
                    </div>
                    <div class="progress progress-xs mt-7 bg-info-o-60">
                        <div class="progress-bar bg-danger" role="progressbar" style="width: 45%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <div class="d-flex align-items-center justify-content-between mb-2">
                        <span class="text-muted mr-2 font-size-sm font-weight-bold">
                            @L("DashboardSampleStatisticsHelpText")
                        </span>
                        <span class="text-muted font-size-sm font-weight-bold">
                            45%
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card card-custom bgi-no-repeat card-stretch gutter-b dashboard-statistics2 h-100">
                <div class="card-body">
                    <a href="#" class="card-title text-left font-weight-bolder text-dark font-size-h6 mb-4 text-hover-state-dark d-block">
                        @L("DashboardSampleStatistics") 2
                    </a>
                    <div class="font-weight-bold text-muted font-size-sm text-left">
                        <span class="text-success font-weight-bolder font-size-h2 mr-2 dashboard-placeholder2 counterup">...</span>
                    </div>
                    <div class="progress progress-xs mt-7 bg-info-o-60">
                        <div class="progress-bar bg-success" role="progressbar" style="width: 65%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                    <div class="d-flex align-items-center justify-content-between mb-2">
                        <span class="text-muted mr-2 font-size-sm font-weight-bold">
                            @L("DashboardSampleStatisticsHelpText")
                        </span>
                        <span class="text-muted font-size-sm font-weight-bold">
                            65%
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
